<template>
	<!-- 统计及监控模块-工作情况汇总（月统计）页面 -->
	<div class="fillcontain">
		<el-form label-width="100px" class="search_container">
			<el-row>
				<el-col :span="5">
					<el-form-item label="业务部门" prop="customerNo">
						<el-select v-model="searchParams.orgid" placeholder="">
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="选择日期" prop="telephone">
						<el-date-picker v-model="searchParams.time" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="渠道选择" prop="customerName">
						<el-select v-model="searchParams.channel" placeholder="">
							<el-option v-for="item in channels" :key="item.key" :label="item.name" :value="item.key">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="险种类型" prop="idNo">
						<el-select v-model="searchParams.risk" placeholder="">
							<el-option v-for="item in insmain" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4" style="padding-left: 40px;float: right;">
					<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
					<el-button type="primary" plain icon="el-icon-refresh" @click="research"></el-button>
				</el-col>
			</el-row>
		</el-form>
		<div class="contain">
			<!-- 操作按钮 -->
			<el-row class="bgfff pb20" v-if="false">
				<el-col :span="24">
					<el-button @click="addDialogVisible = true" type="danger" plain>导出</el-button>
				</el-col>
			</el-row>


			<el-row>
				<el-col :span="8" class="pr15">
					<div class="statis_box prescription">
						<h5 class="statis_tit">时效达成率</h5>
						<el-row>
							<el-col :span="8" class="">
								<div id="my-chart-Pie-prescription"></div>
							</el-col>
							<el-col :span="16" class="text_center">
								<div class='statis_prescription_name pt10'>
									<el-row>
										<el-col :span="10" class="text_right"><span class="textColorGreyA">达成差异率:</span></el-col>
										<el-col :span="12" class="text_left"><span  id="reachRate">0.0%</span></el-col>

										<el-col :span="10" class="text_right"><span class="textColorGreyA">达成率:</span></el-col>
										<el-col :span="7" class="text_left"><span class="textColorGreyB" id="dayachRate">83.97%</span></el-col>
										<el-col :span="7" class="text_left"> <span></span></el-col>


										<el-col :span="10" class="text_right"><span class="textColorGreyA">当月受理任务数:</span></el-col>
										<el-col :span="5" class="text_left"><span class="textColorGreyB" id="dayAllCount"></span></el-col>
										<el-col :span="9" class="text_left"> <span id="dayAllgrowth"></span></el-col>

										<el-col :span="10" class="text_right"><span class="textColorGreyA">当月完成任务数:</span></el-col>
										<el-col :span="5" class="text_left"><span class="textColorGreyB" id="dayEndCount"></span></el-col>
										<el-col :span="9" class="text_left"> <span id="dayEndgrowth"></span></el-col>
									</el-row>
								</div>
							</el-col>
						</el-row>
						<!-- 日期 -->
						<el-row class="mb10">
							<el-col :span="24">
								<el-col :span="10">
									<p class="pText pGreen">
										<el-col :span="6">&nbsp;</el-col>
										<el-col :span="2"><span class="dot">&nbsp;</span></el-col>
										<el-col :span="16"><span class="">达标</span></el-col>
									</p>
								</el-col>

								<el-col :span="10">
									<p class="pText pRed">
										<el-col :span="6">&nbsp;</el-col>
										<el-col :span="2"><span class="dot">&nbsp;</span></el-col>
										<el-col :span="16"><span class="">未达标</span></el-col>
									</p>
								</el-col>
							</el-col>
						</el-row>
						<div class="day_box">
							<div class="month_title">
								<el-row class="pt15 pb15">
									<el-col :span="6" class="text_center">
										<i class="el-icon-arrow-left" @click="prevMonth"></i>
									</el-col>
									<el-col :span="12" class="text_center"><span class="month" id="dateTitle"></span></el-col>
									<el-col :span="6" class="text_center">
										<i class="el-icon-arrow-right" @click="nextMonth"></i>
									</el-col>
								</el-row>
							</div>
							<el-calendar v-model="datevalue">
								<template slot="dateCell" slot-scope="{date, data}">
									<!-- <p :class="data.isSelected ? 'is-selected' : ''"> -->
									<p>
										{{ data.day.split('-').slice(2).join('-') }}
									</p>
									<div v-if="dateMap[data.day]!=undefined">
										<div v-if="dateMap[data.day] =='Y'">
											<el-row class="set pGreen">
												<el-col :span="24" class="pt5">
													<span class="dot">&nbsp;</span>
												</el-col>
											</el-row>
										</div>
										<div v-else>
											<el-row class="set pRed">
												<el-col :span="24" class="pt5">
													<span class="dot">&nbsp;</span>
												</el-col>
											</el-row>
										</div>
									</div>
									<div v-else>
										<el-row class="set pRed">
											<el-col :span="24" class="pt5">
												<span class="dot">&nbsp;</span>
											</el-col>
										</el-row>
									</div>
								</template>
							</el-calendar>
						</div>
					</div>
				</el-col>
				<el-col :span="16">
					<el-col :span="24">
						<div class="statis_box number">
							<h5 class="statis_tit">人工核保处理件数</h5>
							<div id="my-chart-Bar-number"></div>
						</div>
					</el-col>
					<el-col :span="24" class="mt15">
						<div class="statis_box comparison">
							<h5 class="statis_tit">人工工作量情况比对</h5>
							<p class="text_right subtext"><span style="color:#ffff3c ;">— </span>人均工作量 <i style="color:#7bc7c8 ;" class="el-icon-s-data"></i>
								实际工作量</p>
							<div id="my-chart-Bar-comparison"></div>
						</div>
					</el-col>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		queryCommon
	} from '@/api/statis/newWork/newWork';

	import moment from 'moment';
	import TaskConstants, {
		call
	} from '@/api/taskManager/common'
	import constant from '@/utils/constant'
	export default {
		data() {
			return {
				emptySearchParams:{},
				datevalue: new Date(),
				addDialogVisible: false,
				routeid: '',
				dateMap: {},
				searchParams: {
					channel: '',
					risk: '',
					time: '',
					orgid: ''
				},
				insmain: TaskConstants.insmain,
				channels: TaskConstants.preChannelType,

			}
		},
		activated(){
		    document.onkeydown = (event)=>{
		        var e = event || window.event || arguments.callee.caller.arguments[0];
		        if (e && e.keyCode == 113) {
		            this.search();
		        }
		    };
		}, 
		created() {
			this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
		},
		mounted() {
			// this.prescription();

			// this.drawLine();
			this.init(new Date());
			// this.comparison();
			this.queryC();
		},
		methods: {
			init(date) {
				let title = document.getElementById("dateTitle");
				title.innerHTML = moment(date).format("YYYY-MM");
				this.dateMap ={};
				this.reachDistrbution();
			},
			nextMonth() {
				this.datevalue = moment(this.datevalue).add(1, 'months')
				this.init(this.datevalue);
			},
			prevMonth() {
				this.datevalue = moment(this.datevalue).subtract(1, 'months')
				this.init(this.datevalue);
			},
			search() {
				this.queryC();
			},
			research() {
				this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
			},
			show() {
				this.$store.dispatch('loading/CHANGE_LOADING', true);
			},
			cancle() {
				this.$store.dispatch('loading/CHANGE_LOADING', false)
			},
			queryC() {
				let param = {
					'routeid': 'hebao',
					'time': this.searchParams.time,
					'type': 'month',
					'channel': this.searchParams.channel,
					'risk': this.searchParams.risk
				};
				let vueObj = this;
				queryCommon(vueObj, param, "日");
			},
			reachDistrbution() {
				this.show()
				let title = document.getElementById("dateTitle");
				let param = {
					'time': title.innerHTML,
					'type': 'month',
				};
				call(TaskConstants.apis["reachDistrbution"], param, "post").then(result => {
					if (result.resultCode == constant.SUCCESS && result.data) {
						this.dateMap = result.data;
					}
					this.datevalue = this.datevalue;
					this.cancle();
				}).catch(err => {
					this.cancle();
				})
			}
		},
		computed: {
			...mapGetters(['tags']),
		},
	}
</script>

<style lang="less" scoped>
	.contain {
		background: #fff;
		padding: 30px 10px 20px 10px;

		.statis_box {
			box-shadow: 0 0 10px #e1e1e1;
			border: 1px solid #e1e1e1;

			.statis_tit {
				padding: 10px 20px;
				color: #666;
			}

			.el-icon-s-marketing {
				color: #f76767;
				padding-right: 10px;

			}
		}

		.statis_prescription_name {
			span {
				padding: 5px 2px 5px 2px;
				display: block;
			}

			span.textColorGreyA {
				color: #999;
			}

			span.textColorGreyB {
				color: #666;
			}

			span.textColorRed {
				color: #f76767;
			}

			span.textColorGreen {
				color: #92CEAB;
			}
		}

		.pText {
			color: #666666;
		}

		.pGreen {
			.dot {
				background-color: #92CEAB;
				border: 1px solid #92CEAB;
			}
		}

		.pYello {
			.dot {
				background-color: #F9B248;
				border: 1px solid #F9B248;
			}
		}

		.pOrange {
			.dot {
				background-color: #FF8638;
				border: 1px solid #FF8638;
			}
		}

		.pRed {
			.dot {
				background-color: #f76767;
				border: 1px solid #f76767;
			}
		}

		.dot {
			display: block;
			border-radius: 50%;
			text-align: center;
			width: 4px;
			height: 4px;
			margin: 6px auto 0 auto;
		}


		.number p.subtext {
			padding: 0 20px;
			color: #666;
		}

		#my-chart-Pie-prescription {
			width: 140px;
			padding-bottom: 20px;
			min-height: 140px;
		}

		#my-chart-Bar-number {
			width: 850px;
			padding-bottom: 20px;
			min-height: 280px;
		}

		#my-chart-Bar-comparison {
			width: 850px;
			padding-bottom: 20px;
			min-height: 280px;
		}

		// 日期控件
		.day_box {
			margin: 0 20px;

			.el-calendar-table th {
				background-color: #F7F9FA;
			}

			.month_title {
				background-color: #F7F9FA;

				.week {
					border-top: 1px solid #EBEFF0;
					border-bottom: 1px solid #EBEFF0;

					span {
						color: #333;
						display: inline-block;
						width: 14.28%;
						text-align: center;
						padding: 15px 0;
					}
				}
			}
		}
	}

	.fillcontain {
		padding-bottom: 0;
	}

	.search_container {
		padding: 20px 20px 0 20px;
		//    border-top: 1px solid #e1e1e1;
	}
</style>
